@use '../../../css/mixins/components';

/**
 * List Group Item
 */

.list-group-item {
    @include components.border-bottom-width('list-group', 'item', true);
    @include components.border-bottom-style('list-group', 'item', true);
    @include components.border-bottom-color('list-group', 'item', true);
    @include components.padding('list-group', 'item', true);
    @include components.transition('list-group', 'item', true);

    display: block;
    margin-bottom: 0;

    &.-active {
        @include components.border-radius('list-group', 'item', true);
        @include components.background('list-group', 'item' 'active', true);
        @include components.border-bottom-color('list-group', 'item' 'active', true);
        @include components.color('list-group', 'item' 'active', true);
    }

    &:first-child {
        @include components.border-top-left-radius('list-group', 'item', true);
        @include components.border-top-right-radius('list-group', 'item', true);
    }

    &:last-child {
        @include components.border-bottom-left-radius('list-group', 'item', true);
        @include components.border-bottom-right-radius('list-group', 'item', true);

        border-bottom-width: 0;
    }

    &:hover,
    &:focus {
        text-decoration: none;
    }

    &.-disabled {
        @include components.color('list-group', 'item' 'disabled', true);

        pointer-events: none;
        cursor: default;
    }
}
